@extends('layouts/contentNavbarLayout')

@section('vendor-script')
  <script src="{{asset('assets/vendor/libs/apex-charts/apexcharts.js')}}"></script>
@endsection

@section('content')
  <style>
    @media (min-width: 767.98px) {
       td:first-child {
        position: sticky;
        background-color: white !important;;
        z-index: 1;
        left: 0;
        min-width: 300px;
      }

      th:last-child, td:last-child {
        min-width: 250px;
      }

      th {
        position: sticky;
        background-color: whitesmoke !important;
        z-index: 1;
        top: 0;;
      }
      th:first-child{
        position: sticky;
        background-color: whitesmoke !important;;
        z-index: 2;
        left: 0;
        min-width: 300px;
      }
    }


  </style>

  <div class="card mb-4">
    <div class="card-body p-2">
      <div class="alert alert-warning m-0" role="alert">
        <h6 class="alert-heading mb-1"><i class='bx bx-info-square fs-3'></i> Внимание!</h6>
        <div class="mb-2">
          Для формирования расписания будут использованы данные из <a href="/admin/month_constants">справочника</a> за
          выбранный период
        </div>

        <div>При изменении справочника необходимо создать новую версию графика работы врачей <button class="btn btn-sm btn-primary ms-3" onclick="createNewVersion()">Создать</button></div>
      </div>
    </div>
  </div>

    <div class="card p-2">
      <div class="card-header d-flex justify-content-between flex-wrap">
        <h5 class="mb-1"><i class='bx bx-category-alt  me-1 text-primary fs-3'></i> Формирование графика работы врачей
        </h5>
        <input id="schedule-month-selector" class="form-control w-px-150" type="month" value="{{$date}}"/>
      </div>
      <div class="card-body">

        <div id="schedule-create-process-handle" style="display: none">
          <div class="d-flex flex-column align-items-center justify-content-center h-px-350 w-100">
            <div class="spinner-border mb-2" style="width: 3rem; height: 3rem;" role="status"></div>
            <span class="text-muted">Идет формирование расписания</span>
          </div>
        </div>

        <div id="form-schedile-content">
        @if($scheduleProject)
          <input id="projectCode" value="{{$scheduleProject['Код']}}" class="d-none">
          <div class="d-flex justify-content-between flex-wrap mb-3">
            <div class="d-flex flex-column">
              <div class="d-flex mb-2">
                <div class="me-2">Текущий статус графика:</div>
                <div
                  class="badge {{$scheduleProject['КодСтатуса'] == 1 ? 'bg-warning text-dark' :  ($scheduleProject['КодСтатуса']  == 2 ? 'bg-success' : 'bg-secondary') }}">{{$scheduleStatuses[$scheduleProject['КодСтатуса']]['Название']}}</div>
              </div>
              <div class="d-flex align-items-center mb-2">
                <div class="me-2">Версии:</div>
                @if($scheduleVersions && !empty($scheduleVersions))
                  <select class="form-select" id="project-version-select">
                    @foreach($scheduleVersions as $version)
                      <option {{$version['Код'] == $currentVersionId ? 'selected' : ''}} value="{{$version['Код']}}">
                        №{{$version['Код']}}
                        от: {{ date('d-m-Y', strtotime($version['ДатаСоздания'])) }} {{$version['Утверждено'] ? ' ✅ - утвержденная' : '' }}
                      </option>
                    @endforeach
                  </select>

                @endif
              </div>
            </div>
            <!--buttons-->
            <div>
              @if($scheduleProject['КодСтатуса'] == 1)
                <button class="btn btn-success" onclick="approve()">Утвердить</button>
              @elseif($scheduleProject['КодСтатуса']  == 2)
                <button class="btn btn-warning" onclick="forming()">Вернуть на формирование</button>
              @endif
                <button class="btn btn-primary" title="Скачать" onclick="download()"><i class='bx bx-download'></i></button>
            </div>
          </div>

          @if($currentVersionId)
            <div id="created-schedule" class="overflow-auto w-100" style="height: 600px; overflow-y: scroll;">
              <table id="project-schedule" class="modals_tables_grop datatables-basic table border-top w-100">
                <thead>
                <th>Информация о враче</th>
                @php
                  // Разделяем дату на год и месяц
                  list($year, $month) = explode('-', $date);
                  // Получаем количество дней в месяце
                  $daysInMonth = date('t', strtotime($date));
                  // Выводим каждый день месяца
                  for ($day = 1; $day <= $daysInMonth; $day++) {
                  // Форматируем дату
                  $formattedDate = sprintf('%02d', $day);
                  echo '<th class="text-center">'. $formattedDate . PHP_EOL.'</th>';
                  if($day == 15){
                          echo '<th>Итог за 1 половину:</th>';
                  }
                  }
                @endphp
                <th>Итог за 2 половину:</th>
                <th>Норма часов <br>
                  по графику / полный месяц
                </th>
                </thead>
                <tbody>
                @foreach($scheduleVersionData as $doc)
                  <tr>
                    <td>
                      <div class="d-flex">
                        <div class="col-6 d-flex flex-column">
                         <span class="text-muted mb-2"
                               title="Табельный номер">№ {{$doc['ТабНомер'] ? $doc['ТабНомер'] : '-'}} </span>
                          <h6>{{$doc['ФИО']}}</h6>
                          <span>ставка: {{$doc['Ставка']}}</span>
                        </div>
                        <div class="col-6 d-flex flex-wrap">
                          @foreach($doc['Модальности'] as $modal)
                            <span class="{{$modal['Основная'] ? 'text-primary' : ''}} m-1 ms-0 mt-0"
                                  title="{{$modal['Основная'] ? 'Основная модальность' : ''}}">{{ $modal['Модальность']['Аббр'] ? $modal['Модальность']['Аббр'] : $modal['Модальность']['Название']}}</span>
                          @endforeach
                        </div>
                      </div>
                    </td>
                    @foreach($doc['СменыНаМесяц'] as $workDay)
                      <td class="p-1">
                        @if($workDay['Смена'])
                          <div
                            class="d-flex flex-column align-items-center justify-content-center text-white bg-label-primary p-2 border rounded text-center w-px-150 h-px-100">
                            @php
                              // Разделяем исходную дату и время
                               $time = $workDay['Смена']['ВремяНачала'];
                              // Разделяем время, которое нужно добавить
                              list($addHours, $addMinutes, $addSeconds) = explode(':',  $workDay['Смена']['Продолжительность']);
                              list($addHours2, $addMinutes2, $addSeconds2) = explode(':',  $workDay['Смена']['Перерыв']);

                              // Преобразуем время в секунды
                              $addSeconds = $addHours * 3600 + $addMinutes * 60 + $addSeconds;
                              $addSeconds2 = $addHours2 * 3600 + $addMinutes2 * 60 + $addSeconds2;
                              // Преобразуем исходное время в секунды
                              list($hours, $minutes, $seconds) = explode(':', $time);
                              $originalSeconds = $hours * 3600 + $minutes * 60 + $seconds;
                              // Складываем секунды
                              $totalSeconds = $originalSeconds + $addSeconds + $addSeconds2;
                              // Преобразуем секунды в часы, минуты и секунды
                              $newHours = floor($totalSeconds / 3600);
                              $newMinutes = floor(($totalSeconds % 3600) / 60);
                              $newSeconds = $totalSeconds % 60;
                              // Форматируем новое время
                              $newTime = sprintf('%02d:%02d:%02d', $newHours, $newMinutes, $newSeconds);
                            @endphp
                            <div
                              class="d-flex mb-2">{{substr($workDay['Смена']['ВремяНачала'],0, strlen($workDay['Смена']['ВремяНачала']) -3)}}
                              - {{substr($newTime,0, strlen($newTime) -3)}}</div>
                            <div class="d-flex"><i class='bx bx-bowl-hot'
                                                   title="Перерыв"></i> {{substr($workDay['Смена']['Перерыв'],0, strlen($workDay['Смена']['Перерыв']) -3)}}
                            </div>
                            <div class="d-flex"><i class='bx bx-time-five'
                                                   title="Отработано"></i>{{substr($workDay['Смена']['Продолжительность'],0, strlen($workDay['Смена']['Продолжительность']) -3)}}
                            </div>
                          </div>
                        @else
                          <div
                            class="d-flex flex-column justify-content-center align-items-center text-primary bg-label-gray p-3 border rounded text-center w-px-150 h-px-100">
                            -
                          </div>
                        @endif
                      </td>
                      @if(substr($workDay['Дата'], 8, 2) == '15')
                        <td>{{$doc['Итог1']}}</td>
                      @endif
                    @endforeach
                    <td>{{$doc['Итог2']}}</td>
                    <td>{{ substr($doc['НормаЧасовПоГрафику'],0, strlen($doc['НормаЧасовПоГрафику']) -3)}}
                      / {{ substr($doc['НормаЧасовЗаПолныйМесяц'],0, strlen($doc['НормаЧасовЗаПолныйМесяц']) -3)}}</td>
                  </tr>
                @endforeach
                </tbody>
              </table>
            </div>
          @endif
        </div>
      </div>

      @else
        <div id="schedule-crate-project-label">
          <div class="d-flex flex-column justify-content-center align-items-center h-px-400">
            <h5>График работы врачей на выбранный месяц еще не сформирован</h5>
            <button class="btn btn-primary" onclick="createProject()">Сформировать</button>
          </div>
        </div>

        <div id="schedule-create-process" style="display: none">
          <div class="d-flex flex-column align-items-center justify-content-center h-px-350 w-100">
            <div class="spinner-border mb-2" style="width: 3rem; height: 3rem;" role="status"></div>
            <span class="text-muted">Идет формирование расписания</span>
          </div>
        </div>

      @endif
    </div>
  </div>
@endsection
@section('page-script')
  <script>

    $('#schedule-month-selector').on('change', function () {
      let scheduleDate = $('#schedule-month-selector').val();
      window.location.replace('/schedule/' + scheduleDate);
    })

    $('#project-version-select').on('change', function () {
      let scheduleDate = $('#schedule-month-selector').val();
      let version = $('#project-version-select').val();
      window.location.replace('/schedule/' + scheduleDate + '/' + version);
    })

    function createProject() {

      $('#schedule-crate-project-label').hide();
      $('#schedule-create-process').show();
      const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

      fetch('/schedule/create-project', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': csrfToken // Устанавливаем CSRF-токен
        },
        body: JSON.stringify({
          projectDate: $('#schedule-month-selector').val()
        })
      })
        .then(response => response.json())
        .then(data => {
          location.reload();
        })
        .catch(error => {
          // Обработка ошибок
          console.error('Ошибка:', error);
        });
    }

    function approve() {
      const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
      fetch('/schedule/project-approve', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': csrfToken // Устанавливаем CSRF-токен
        },
        body: JSON.stringify({
          projectCode: $('#projectCode').val(),
          versionCode: $('#project-version-select').val()
        })
      })
        .then(response => response.json())
        .then(data => {
          location.reload();
        })
        .catch(error => {
          // Обработка ошибок
          console.error('Ошибка:', error);
        });
    }

    function download(){
      let version = $('#project-version-select').val();
      location.href = '/download/schedule/' + version;
    }

    function createNewVersion(){
      $('#form-schedile-content').hide();
      $('#schedule-create-process-handle').show();
      const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
      fetch('/schedule/generate-new-version', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': csrfToken // Устанавливаем CSRF-токен
        },
        body: JSON.stringify({
          code: $('#projectCode').val()
        })
      })
        .then(response => response.json())
        .then(data => {
          location.reload();
        })
        .catch(error => {
          // Обработка ошибок
          console.error('Ошибка:', error);
        });
    }

    function forming() {
      const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
      fetch('/schedule/project-forming', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': csrfToken // Устанавливаем CSRF-токен
        },
        body: JSON.stringify({
          projectCode: $('#projectCode').val()
        })
      })
        .then(response => response.json())
        .then(data => {
          location.reload();
        })
        .catch(error => {
          // Обработка ошибок
          console.error('Ошибка:', error);
        });
    }


  </script>
@endsection
